<div class="product-display-section container-fluid" id="best-bundle" data-id="shopify-section-landing-page-best-bundle">
  <h2 class="sec-custome-h2 {{ section.settings.custom_h2_class }}">
      <img src="{{ 'product-sec-h2-bg.png' | asset_url }}" class="sec-custome-h2-img" />
      <span>{{ section.settings.activity_title }}</span>
      <img src="{{ 'product-sec-h2-bg.png' | asset_url }}" class="sec-custome-h2-img" />
  </h2>
  {% if section.settings.show_img_bestbundle %}
  <div class="header-banner">
    <a href="{{ section.settings.bestbundle_img_href }}" style="margin:0 auto;">

      <img class="banner-mobile-image" src="{% if section.settings.bestbundle_img_mobile %}{{ section.settings.bestbundle_img_mobile | img_url: 'master' }}
      {% else %}{{ 'Black_Friday_mob.jpg' | asset_url }}{% endif %}"  
      style="margin:0 auto;" />

      <img class="banner-desktop-image" src="{% if section.settings.bestbundle_img_pc %}{{ section.settings.bestbundle_img_pc | img_url: 'master' }}
      {% else %}{{ 'Black_Friday_pc_banner.jpg' | asset_url }}{% endif %}"  
      style="margin:0 auto;" />

    </a>
  </div>
  {% endif %}
  <div class="product-section">
    <div class="products">

        {% if section.settings.selected_product_31 and section.settings.variant_id_31 %}
            {% assign product_31 = section.settings.selected_product_31 %}
            {% assign variant_id_31 = section.settings.variant_id_31 | times: 1 %}
            {% assign variant_31 = product_31.variants | where: "id", variant_id_31 | first %}
            {% if variant_31.available and variant_31.inventory_quantity > 0 %}
            <div class="product-card">
                {% if variant_31.compare_at_price and variant_31.compare_at_price > variant_31.price %}
                  {% assign discount_diff_31 = variant_31.compare_at_price | minus: variant_31.price %}
                <div class="discount-badge">{{ discount_diff_31 | money_without_trailing_zeros }}</div>
                {% endif %}
                <img src="{% if variant_31.featured_image %} {{ variant_31.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_31.featured_image | img_url: 'medium' }} {% endif %}" alt="{{ variant_31.title }}" />
                <div class="product-info">
                    {% if variant_31.compare_at_price and variant_31.compare_at_price > variant_31.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_3 }}</p>
                    {% endif %}
                    <h3>{{ product_31.title }}</h3>
                    {% for op in variant_31.options %}<label>{{ op }}</label>{% endfor %}
                    <p class="price">{{ variant_31.price | money }}
                    {% if variant_31.compare_at_price and variant_31.compare_at_price > variant_31.price %}
                    <span class="old-price">{{ variant_31.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="javascript:window.location.href='/cart/{{ variant_id_31 }}:1'">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_31.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% if section.settings.selected_product_32 and section.settings.variant_id_32 %}
            {% assign product_32 = section.settings.selected_product_32 %}
            {% assign variant_id_32 = section.settings.variant_id_32 | times: 1 %}
            {% assign variant_32 = product_32.variants | where: "id", variant_id_32 | first %}
            {% if variant_32.available and variant_32.inventory_quantity > 0 %}
            <div class="product-card">
                {% if variant_32.compare_at_price and variant_32.compare_at_price > variant_32.price %}
                  {% assign discount_diff_32 = variant_32.compare_at_price | minus: variant_32.price %}
                <div class="discount-badge">{{ discount_diff_32 | money_without_trailing_zeros }}</div>
                {% endif %}
                <img src="{% if variant_32.featured_image %} {{ variant_32.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_32.featured_image | img_url: 'medium' }} {% endif %}" alt="{{ variant_32.title }}" />
                <div class="product-info">
                    {% if variant_32.compare_at_price and variant_32.compare_at_price > variant_32.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_3 }}</p>
                    {% endif %}
                    <h3>{{ product_32.title }}</h3>
                    {% for op in variant_32.options %}<label>{{ op }}</label>{% endfor %}
                    <p class="price">{{ variant_32.price | money }}
                    {% if variant_32.compare_at_price and variant_32.compare_at_price > variant_32.price %}
                    <span class="old-price">{{ variant_32.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="javascript:window.location.href='/cart/{{ variant_id_32 }}:1'">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_32.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% if section.settings.selected_product_33 and section.settings.variant_id_33 %}
            {% assign product_33 = section.settings.selected_product_33 %}
            {% assign variant_id_33 = section.settings.variant_id_33 | times: 1 %}
            {% assign variant_33 = product_33.variants | where: "id", variant_id_33 | first %}
            {% if variant_33.available and variant_33.inventory_quantity > 0 %}
            <div class="product-card">
                {% if variant_33.compare_at_price and variant_33.compare_at_price > variant_33.price %}
                  {% assign discount_diff_33 = variant_33.compare_at_price | minus: variant_33.price %}
                <div class="discount-badge">{{ discount_diff_33 | money_without_trailing_zeros }}</div>
                {% endif %}
                <img src="{% if variant_33.featured_image %} {{ variant_33.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_33.featured_image | img_url: 'medium' }} {% endif %}" alt="{{ variant_33.title }}" />
                <div class="product-info">
                    {% if variant_33.compare_at_price and variant_33.compare_at_price > variant_33.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_3 }}</p>
                    {% endif %}
                    <h3>{{ product_33.title }}</h3>
                    {% for op in variant_33.options %}<label>{{ op }}</label>{% endfor %}
                    <p class="price">{{ variant_33.price | money }}
                    {% if variant_33.compare_at_price and variant_33.compare_at_price > variant_33.price %}
                    <span class="old-price">{{ variant_33.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="javascript:window.location.href='/cart/{{ variant_id_33 }}:1'">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_33.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% if section.settings.selected_product_34 and section.settings.variant_id_34 %}
            {% assign product_34 = section.settings.selected_product_34 %}
            {% assign variant_id_34 = section.settings.variant_id_34 | times: 1 %}
            {% assign variant_34 = product_34.variants | where: "id", variant_id_34 | first %}
            {% if variant_34.available and variant_34.inventory_quantity > 0 %}
            <div class="product-card">
                {% if variant_34.compare_at_price and variant_34.compare_at_price > variant_34.price %}
                  {% assign discount_diff_34 = variant_34.compare_at_price | minus: variant_34.price %}
                <div class="discount-badge">{{ discount_diff_34 | money_without_trailing_zeros }}</div>
                {% endif %}
                <img src="{% if variant_34.featured_image %} {{ variant_34.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_34.featured_image | img_url: 'medium' }} {% endif %}" alt="{{ variant_34.title }}" />
                <div class="product-info">
                    {% if variant_34.compare_at_price and variant_34.compare_at_price > variant_34.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_3 }}</p>
                    {% endif %}
                    <h3>{{ product_34.title }}</h3>
                    {% for op in variant_34.options %}<label>{{ op }}</label>{% endfor %}
                    <p class="price">{{ variant_34.price | money }}
                    {% if variant_34.compare_at_price and variant_34.compare_at_price > variant_34.price %}
                    <span class="old-price">{{ variant_34.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="javascript:window.location.href='/cart/{{ variant_id_34 }}:1'">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_34.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
         {% endif %}

         {% if section.settings.selected_product_35 and section.settings.variant_id_35 %}
            {% assign product_35 = section.settings.selected_product_35 %}
            {% assign variant_id_35 = section.settings.variant_id_35 | times: 1 %}
            {% assign variant_35 = product_35.variants | where: "id", variant_id_35 | first %}
            {% if variant_35.available and variant_35.inventory_quantity > 0 %}
            <div class="product-card">
                {% if variant_35.compare_at_price and variant_35.compare_at_price > variant_35.price %}
                  {% assign discount_diff_35 = variant_35.compare_at_price | minus: variant_35.price %}
                <div class="discount-badge">{{ discount_diff_35 | money_without_trailing_zeros }}</div>
                {% endif %}
                <img src="{% if variant_35.featured_image %} {{ variant_35.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_35.featured_image | img_url: 'medium' }} {% endif %}" alt="{{ variant_35.title }}" />
                <div class="product-info">
                    {% if variant_35.compare_at_price and variant_35.compare_at_price > variant_35.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_3 }}</p>
                    {% endif %}
                    <h3>{{ product_35.title }}</h3>
                    {% for op in variant_35.options %}<label>{{ op }}</label>{% endfor %}
                    <p class="price">{{ variant_35.price | money }}
                    {% if variant_35.compare_at_price and variant_35.compare_at_price > variant_35.price %}
                    <span class="old-price">{{ variant_35.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="javascript:window.location.href='/cart/{{ variant_id_35 }}:1'">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_35.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
         {% endif %}

         {% if section.settings.selected_product_36 and section.settings.variant_id_36 %}
            {% assign product_36 = section.settings.selected_product_36 %}
            {% assign variant_id_36 = section.settings.variant_id_36 | times: 1 %}
            {% assign variant_36 = product_36.variants | where: "id", variant_id_36 | first %}
            {% if variant_36.available and variant_36.inventory_quantity > 0 %}
            <div class="product-card">
                {% if variant_36.compare_at_price and variant_36.compare_at_price > variant_36.price %}
                  {% assign discount_diff_36 = variant_36.compare_at_price | minus: variant_36.price %}
                <div class="discount-badge">{{ discount_diff_36 | money_without_trailing_zeros }}</div>
                {% endif %}
                <img src="{% if variant_36.featured_image %} {{ variant_36.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_36.featured_image | img_url: 'medium' }} {% endif %}" alt="{{ variant_36.title }}" />
                <div class="product-info">
                    {% if variant_36.compare_at_price and variant_36.compare_at_price > variant_36.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_3 }}</p>
                    {% endif %}
                    <h3>{{ product_36.title }}</h3>
                    {% for op in variant_36.options %}<label>{{ op }}</label>{% endfor %}
                    <p class="price">{{ variant_36.price | money }}
                    {% if variant_36.compare_at_price and variant_36.compare_at_price > variant_36.price %}
                    <span class="old-price">{{ variant_36.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="javascript:window.location.href='/cart/{{ variant_id_36 }}:1'">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_36.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
         {% endif %}

      </div>
  </div>
</div>
{% schema %}
{
  "name": "Best Bundle Settings",
  "settings": [
    {
      "type": "header",
      "content": "Best Bundle Image Setting"
    },{
      "type": "checkbox",
      "id": "show_img_bestbundle",
      "label": "Enable Image",
      "default": true
    },{
      "type": "text",
      "id": "bestbundle_img_href",
      "label": "Image Link",
      "info": "Put href link here",
      "default":"#"
    },{
      "type": "image_picker",
      "id": "bestbundle_img_pc",
      "label": "Image On PC Client",
      "info": "Upload a image(PC)"
    },{
      "type": "image_picker",
      "id": "bestbundle_img_mobile",
      "label": "Image On Mobile Client",
      "info": "Upload a image(Mobile)"
    },
    {
      "type": "header",
      "content": "Basic Setting"
    },{
      "type": "text",
      "label": "Active Title",
      "id": "activity_title",
      "default": "Best Bundle"
    },{
      "type": "text",
      "id": "custom_h2_class",
      "label": "Custom Title classes"
    },
    {
      "type": "text",
      "id": "promo_sale_tip_3",
      "label": "Promotion Product Tips",
      "default": "Lowest Price"
    },
    {
      "type": "header",
      "content": "Product[1] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_31",
      "label": "Select Product [1]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "text",
      "id": "variant_id_31",
      "label": "Variant ID [1]",
      "info": "Enter the specific variant ID you want to promote. You can find this ID in the product's variant details."
    },
    {
      "type": "header",
      "content": "Product[2] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_32",
      "label": "Select Product [2]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "text",
      "id": "variant_id_32",
      "label": "Variant ID [2]",
      "info": "Enter the specific variant ID you want to promote. You can find this ID in the product's variant details."
    },
    {
      "type": "header",
      "content": "Product[3] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_33",
      "label": "Select Product [3]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "text",
      "id": "variant_id_33",
      "label": "Variant ID [3]",
      "info": "Enter the specific variant ID you want to promote. You can find this ID in the product's variant details."
    },
    {
      "type": "header",
      "content": "Product[4] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_34",
      "label": "Select Product [4]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "text",
      "id": "variant_id_34",
      "label": "Variant ID [4]",
      "info": "Enter the specific variant ID you want to promote. You can find this ID in the product's variant details."
    },
    {
      "type": "header",
      "content": "Product[5] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_35",
      "label": "Select Product [5]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "text",
      "id": "variant_id_35",
      "label": "Variant ID [5]",
      "info": "Enter the specific variant ID you want to promote. You can find this ID in the product's variant details."
    },
    {
      "type": "header",
      "content": "Product[6] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_36",
      "label": "Select Product [6]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "text",
      "id": "variant_id_36",
      "label": "Variant ID [6]",
      "info": "Enter the specific variant ID you want to promote. You can find this ID in the product's variant details."
    }
  ],
  "presets": [
    {
      "name": "Default"
    }
  ]
}
{% endschema %}